<template>
  <!-- 从业人员 -->
  <view class="staffInfo">
    <u-tabs :list="list" lineColor="#2488F5" lineWidth="30" :current="activeIndex" :inactiveStyle="inactiveStyle"
      :activeStyle="{ color: '#000' }" @click="tabsClick"></u-tabs>

    <view class="wrapper-content" :style="{ height: activeIndex != 0 ? 'calc(100vh - 44px)' : '' }">
      <template v-if="activeIndex == 0">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="items" :data-url="
                paiNew
                  ? `/featureFun/staffDetails/staffDetails?id=${v.id}&position=${v.position_dictText}&companyMessageId=${options.companyMessageId}&index=${activeIndex}`
                  : ''
              " @click="handleClickRouter">
              <view class="lt">
                <image :src="
                    v.personImage
                      ? imgPrefix + v.personImage
                      : baseImgUrl + 'queryFace-01.png'
                  " mode="aspectFill"></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="textAlign label">员工姓名：</view>
                    <view class="value valueName">
                      {{ v.personName || "" }}

                      <!--   <text class="job" v-if="v.position_dictText">
                        {{ v.position_dictText }}
                      </text> -->
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">入职时间：</view>
                    <view class="value valueName">
                      {{ formatters(v.entryTime, "YY-MM-DD") || "" }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">联系方式：</view>
                    <view class="value valueName">
                      {{ v.mobile || "" }}
                    </view>
                  </view>
                  <!-- <view class="facility-item" v-if="paiNew">
                    <view class="textAlign label">身份证号：</view>
                    <view class="value valueName">
                      {{ hiddenInfo(v.idCard, 6, 4) }}
                    </view>
                  </view> -->
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <template v-if="activeIndex == 1">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="items" :data-url="
                paiNew
                  ? `/featureFun/staffDetails/staffDetails?id=${v.id}&position=${v.position_dictText}&index=${activeIndex}`
                  : ''
              " @click="handleClickRouter">
              <view class="lt">
                <image :src="
                    v.personImage
                      ? imgPrefix + v.personImage
                      : baseImgUrl + 'queryFace-01.png'
                  " mode="aspectFill"></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="textAlign label">员工姓名：</view>
                    <view class="value valueName">
                      {{ v.personName || "" }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">离职时间：</view>
                    <view class="value valueName">
                      {{ formatters(v.departTime, "YY-MM-DD") || "" }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">联系方式：</view>
                    <view class="value valueName">
                      {{ v.mobile || "" }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <view v-if="!dataSource.length">
        <u-empty mode="list" text="还没有添加工作人员信息！" :icon="baseImgUrl + 'no-icon3.png'">
        </u-empty>
      </view>
    </view>

    <view class="btns" v-if="paiNew && activeIndex == 0">
      <button class="submit-btn" type="primary" :data-url="`/featureFun/staffNewEditor/staffNewEditor?num=${1}&companyMessageId=${
          options.companyMessageId
        }`" @click="handleClickRouter" icon="map" style="width: 100%">
        + 添加工作人员
      </button>
    </view>
  </view>
</template>

<script>
  import {
    employeesList,
    employeesRemove
  } from "@/api/home.js";
  import {
    handleClickRouter,
    Toast,
    hiddenInfo,
    formatters,
  } from "@/utils/util.js";

  export default {
    name: "staffInfo",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        paiNew: uni.getStorageSync("paiNew"),
        imgPrefix: uni.getStorageSync("imgPrefix"),
        activeIndex: 0,
        list: [{
            name: "在职员工",
            badge: {
              isDot: false,
            },
          },
          {
            name: "离职员工",
            badge: {
              isDot: false,
            },
          },
        ],
        dataSource: [],
        pageBottom: false,
        options: {},
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    onLoad(options) {
      this.options = options;
    },
    onShow() {
      this.dataSource = [];
      this.pageConfig.pageNo = 1;
      this.getList();
    },
    methods: {
      handleClickRouter,
      hiddenInfo,
      formatters,
      scrollBottom() {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      tabsClick(item) {
        this.activeIndex = item.index;
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },
      deleteHandle(v) {
        employeesRemove(v.id).then((res) => {
          if (res.code == 200) {
            Toast("删除成功");
            this.dataSource = [];
            this.pageConfig.pageNo = 1;
            this.getList();
          }
        });
      },
      getList() {
        let data = {
          status: this.activeIndex == 0 ? "1" : "0",
          companyMessageId: this.options.companyMessageId,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };

        employeesList(data).then((res) => {
          this.dataSource = this.dataSource.concat(res.result.records || []);
          this.pageConfig.total = res.result.total;
        });
      },
    },
  };
</script>

<style lang="scss">
  .staffInfo {
    flex: 1;

    .wrapper-content {
      height: calc(100vh - 116px);
      background: #f8f9fb;

      .wrapper-item {
        margin: 0 20rpx;
        padding: 30rpx 40rpx;
        background-color: #ffffff;
        margin-bottom: 20rpx;

        .items {
          display: flex;

          .lt {
            width: 180rpx;
            height: 200rpx;
            margin-right: 30rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .rt {
            width: 425rpx;
            max-width: 425rpx;
          }
        }
      }
    }

    .wrapper-facility {
      padding-top: 30rpx;
      font-size: 26rpx;
      font-weight: 500;

      .facility-item {
        display: flex;
        margin-bottom: 20rpx;

        .lineLabel {
          line-height: 45rpx;
        }

        .label {
          color: #a1a1a1;
          width: 135rpx;
          min-width: 135rpx;
        }

        .job {
          display: inline-block;
          margin-left: 10rpx;
          padding: 2rpx 13rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #2488f5;
          background: #d8f2ff;
        }
      }
    }
  }
</style>